<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<!--Team Home-->
<div id="teamDiv">
  <div align="right">
    <button nz-button id="btnAddTeam" nzType="primary" style="margin: 10px;" (click)="addTeam()">
      <i nz-icon nzType="plus"></i>
      Add Team
    </button>
  </div>
  <div>
    <nz-table #teamListTable [nzData]="teamList" nzNoResult="No result">
      <thead>
        <tr>
          <th>Name</th>
          <th>Owner</th>
          <th>Created Time</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let team of teamListTable.data">
          <td>{{ team.teamName }}</td>
          <td>{{ team.owner }}</td>
          <td>{{ team.createTime }}</td>
          <td>
            <a (click)="showOverview(team)">Overview</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a>Enter</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="deleteTeam(team)">Delete</a>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</div>

<!--Add Team-->
<nz-drawer
  nzTitle="Add Team"
  [nzMaskClosable]="false"
  [nzWidth]="540"
  (nzOnClose)="closeDrawer()"
  [nzVisible]="drawerVisible"
  [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom': '53px' }"
>
  <!--Add Form-->
  <form nz-form [formGroup]="newTeamForm" nzLayout="horizontal">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>Team Name</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="formTeamNameErrMesg">
        <input nz-input id="inputNewTeamName" placeholder="Please input team name" formControlName="teamName" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>Owner</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="This is required!">
        <input nz-input id="inputNewTeamOwner" type="text" placeholder="Please input owner" formControlName="owner" />
      </nz-form-control>
    </nz-form-item>
  </form>

  <div align="right">
    <button nz-button nzType="default" (click)="drawerVisible = false" style="margin-right: 8px;">Cancel</button>
    <button
      nz-button
      id="submitNewTeamBtn"
      nzType="primary"
      [nzLoading]="submitBtnIsLoading"
      (click)="submitNewTeam()"
      style="margin-right: 8px;"
      [disabled]="!newTeamForm.get('teamName').valid || !newTeamForm.get('owner').valid"
    >
      Create
    </button>
  </div>
</nz-drawer>

<!--Detail-->
<nz-modal
  [nzVisible]="overviewModalVisible"
  [nzWidth]="540"
  nzTitle="Overview"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
>
  <h2>Team Name:</h2>
  <p>{{ currentTeam_teamName }}</p>
  <h2>ID:</h2>
  <p>{{ currentTeam_id }}</p>
  <h2>Owner:</h2>
  <p>{{ currentTeam_owner }}</p>
  <h2>Create Time</h2>
  <p>{{ currentTeam_createTime }}</p>
</nz-modal>
